<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="exportHandle('1')">导出列表</el-button>
        <el-button type="primary" @click="exportHandle('2')">导出总计结算单</el-button>
      </template>
      <div slot="table-before">订单合计4065元</div>
    </pf-table>
  </div>
</template>

<script>

export default {
  name: 'ConsumeSettle',
  components: {
  },
  data() {
    return {
      form: {},
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '姓名', prop: 'account', attrs },
        { label: '手机号', prop: 'account', attrs },
        { label: '单位名称', prop: 'roleName', attrs },
        { label: '账期', prop: 'userName', attrs },
        { label: '订单编号', prop: 'mobile', attrs },
        { label: '店铺名称', prop: 'mobile', attrs },
        { label: '所属项目', prop: 'mobile', attrs },
        { label: '订单内容', prop: 'mobile', attrs },
        { label: '数量', prop: 'sexStr', attrs },
        { label: '产生时间', slot: 'statusStr', attrs },
        { label: '状态', slot: 'statusStr', attrs },
        { label: '订单总价', slot: 'statusStr', attrs },
        { label: '合计', slot: 'statusStr', attrs }
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '姓名',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '手机号',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '单位名称',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '订单编号',
          prop: 'roleName'
        }, {
          type: 'select',
          label: '订单状态',
          prop: 'roleName'
        }, {
          type: 'select',
          label: '所属项目',
          prop: 'roleName'
        }, {
          type: 'date',
          label: '产生时间',
          prop: 'dateRange',
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        ...formQuery
      }
      // getRoleList(data).then(res => {
      //   this.loading = false
      //   done({ data: res.data || [], total: res.count || 0 })
      // }).catch(() => {
      //   done({ data: [], total: 0 })
      //   this.loading = false
      // })
      done({ data: [1], total: 0 })
    },

    // 导出
    exportHandle() {

    }
  }
}
</script>

<style lang="scss" scoped></style>
